<!--
 * @description: Headling config dialog 
 * @Date: 2023-04-11 12:21:15
 * @example: 
 * @params: 
-->
<template>
  <div class="container">
    <div class="comshow">
      <SliderCom
        :title="SliderConfig.title"
        :silVal="SliderConfig.silVal"
        :vertical="SliderConfig.vertical"
        :unit="SliderConfig.unit"
        :gradientColor="SliderConfig.gradientColor"
        :backtrsprant="SliderConfig.BackTrasprant"
      />
    </div>
    <div class="com_config">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="Basice" name="first">
          <!-- titleConfig -->
          <div class="titleConfig">
            <span class="title">Title</span>
            <div class="title_input">
              <el-input
                v-model="SliderConfig.title"
                placeholder="Type something"
                :prefix-icon="EditPen"
              />
            </div>
          </div>
          <div class="titleConfig">
            <span class="title">Orientation</span>
            <div class="title_input">
              <el-radio-group v-model="SliderConfig.vertical">
                <el-radio :label="false">vertical</el-radio>
                <el-radio :label="true">horizontal</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="titleConfig">
            <span class="title">Style</span>
            <div class="title_input">
              <el-switch
                v-model="SliderConfig.BackTrasprant"
                size="large"
                active-text="Background Trasprant"
              />
            </div>
          </div>
          <div class="titleConfig">
            <span class="title">Tint Color</span>
            <div class="title_input">
              <color-picker
                v-model:pureColor="SliderConfig.gradientColor"
                format="hex6"
                shape="circle"
                useType="both"
              />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="Fields" name="second">
          <div class="titleConfig">
            <span class="title">primary Field:</span>
            <div class="title_input">
              <el-select
                v-model="SliderConfig.silVal"
                class="m-2"
                placeholder="Select"
                size="large"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div class="titleConfig">
            <span class="title">Step:</span>
            <div class="title_input">
              <el-input
                type="number"
                v-model="SliderConfig.step"
                placeholder="Type something"
                :prefix-icon="EditPen"
              />
            </div>
          </div>
          <div class="titleConfig">
            <span class="title">Unit:</span>
            <div class="title_input">
              <el-input
                v-model="SliderConfig.unit"
                placeholder="Type something"
                :prefix-icon="EditPen"
              />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import SliderCom from "./SliderCom.vue";
import { EditPen } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import http from "@/views/project/config/index";
import { ref, onMounted,reactive } from "vue";

const activeName = ref("first");
const props = defineProps({
  editval: {
    type: Object,
    default: () => {},
  },
  opera: {
    type: String,
    default: () => "Add",
  },
});

const options = [
  {
    value: 10,
    label: "Option1",
  },
  {
    value: 20,
    label: "Option2",
  },
  {
    value: 30,
    label: "Option3",
  },
  {
    value: 40,
    label: "Option4",
  },
  {
    value: 50,
    label: "Option5",
  },
];
const widgetid = ref();
const SliderConfig = reactive({
  title: "",
  vertical: false,
  silVal: 20,
  step: 1,
  unit: "",
  BackTrasprant: false,
  gradientColor: "#dedede",
});
onMounted(() => {
  if (props.opera === "Edit") {
    const resEditval = JSON.parse(props.editval.Widget_config);
    console.log(resEditval);
    widgetid.value = props.editval.Widget_id;
    Object.keys(resEditval).forEach(item=>{
      SliderConfig[item] = resEditval[item]
    })
  }
  console.log("props status", props.opera);
});

const handleRestData = () => {
  SliderConfig.title = "",
  SliderConfig.vertical = false,
  SliderConfig.silVal = 20,
  SliderConfig.unit = "",
  SliderConfig.BackTrasprant = false,
  SliderConfig.gradientColor =  "#dedede"

};

const handleGetTotalnums = async () => {
  const res = await http.getWidgetList();
  const num = res?.data?.data.length;
  return num;
};

/** 新增模块 */
const handleSubmitData = async () => {
  const TotalNum = await handleGetTotalnums();
  const data = {
    Widget_title: "DemoTEST",
    type: "Slider",
    Widget_config: JSON.stringify(SliderConfig),
    x: (TotalNum * 2) % 90,
    y: TotalNum + 90,
    h: SliderConfig.vertical ? 15 : 5,
    w: 20,
    i: TotalNum,
  };
  /** 请求数据 */
  http.handleAddLayout(data).then((res) => {
    if (res.isSuccess) {
      ElMessage({ message: "添加成功!", type: "success" });
    }
  });
};
/** 编辑模块 */
const handleEditdata = () => {
  console.log("编辑数据拉");
  const params = {
    id: widgetid.value,
    config: JSON.stringify(SliderConfig),
  };
  http.handleEditLayout(params).then((res) => {
    console.log("res---", res);
    if (res.data.isSuccess) {
      ElMessage.success("修改成功!");
    }
  });
};

defineExpose({
  handleRestData,
  handleSubmitData,
  handleEditdata,
});
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .comshow {
    // box-sizing: border-box;
    //  height: 200px;
    // //  margin: 0 auto;
    // text-align: center;
    //  padding: 20px;
    //  margin-bottom: 10px;
  }
  .com_config {
    margin-top: 20px;
    .titleConfig {
      margin-top: 20px;
    }
    .title {
      display: block;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
}
</style>
